<template>
  <view class="Cgoodscard" @click="toGoodsDetails">
    <view class="Cgoodscard-image">
    	<u--image :src="goods.iconId[0].url" width="300rpx" height="300rpx" radius="15rpx" />
    </view>
    <u--text :lines="1" :text="goods.name" />
    <u-tag :text="goods.hot" icon="/static/image/recommend.png" type="error" />
    <view class="Cgoodscard-price flexCol fs14">
      <text v-if="goods.oldPrice" class="Cgoodscard-price-left fs12">￥{{ goods.oldPrice }}</text>
      <text class="Cgoodscard-price-right fs12">优惠价:￥<text class="fs14">{{ goods.price }}</text></text>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    goods: { // 单个商品数据
      type: Object,
      required: true
    }
  },
  methods: {
	  toGoodsDetails() {
		  uni.navigateTo({
		  	url: `/pages/goodsDetails/goodsDetails?goodsId=${this.goods.id}`,
		  	animationType: 'pop-in',
		  	animationDuration: 200
		  })
	  }
  }
}
</script>
<style lang="scss" scoped>
.Cgoodscard{
  background-color: #ffffff;
  border-radius: 15rpx;
  display: flex;
  flex-direction: column;
  padding: 10rpx 15rpx;
  &-image{
	  align-self: center;
	  /deep/ .u-image{
	    margin-bottom: 10rpx;
	  	align-self: center;
	  }
  }
  &-price{
    justify-content: space-between;
    &-left{
      color: #82848a;
      text-decoration: line-through;
    }
    &-right{
      color: #dd6161;
    }
  }
  /deep/ .u-tag{
    margin-bottom: 10rpx;
  }
  /deep/ .u-text{
    margin-bottom: 10rpx;
    font-size: 28rpx;
  }
}
</style>
